<script setup lang="ts">
import {useDictViewStore} from "@/store/views/sys/admin/dictStore";
import {storeToRefs} from "pinia";
import {FormInstance} from "element-plus";

const store = useDictViewStore()
const {getList} = store
const {queryData} = storeToRefs(store)
// 搜索ref
const searchRef = ref<FormInstance>()

// 重置搜索
async function resetSearch(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }
  formEl.resetFields()
  queryData.value.query = {}
  await nextTick()
  await getList()
}
</script>

<template>
  <!--  查询 -->
  <x-card>
    <el-form :inline="true" :model="queryData.query" label-suffix=":" ref="searchRef" class="flex flex-items-center">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryData.query.name" clearable/>
      </el-form-item>
      <el-form-item label="编码" prop="type">
        <el-input v-model="queryData.query.code" clearable/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <x-dict-select v-model="queryData.query.status" type-code="status" type="select"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch(searchRef)" circle>
          <i-ep-refresh-left/>
        </el-button>
      </el-form-item>
    </el-form>
  </x-card>
</template>

<style scoped lang="scss">
:deep(.el-form-item) {
  margin-right: 0.6em;
}
</style>